<template>
	<view class="page">
		<view class="h30"></view>
		<view class="flex-SB" @click="showCal = true"
			style="width: 280rpx;margin: 0 auto;color: #1D6EFA;font-size: 28rpx;">
			<u-icon color="#1D6EFA" name="arrow-left"></u-icon>
			<view>{{dateTime}}</view>
			<u-icon color="#1D6EFA" name="arrow-right"></u-icon>
		</view>
		<view style="width: 684rpx;margin: 30rpx auto;background-color: #fff;border-radius: 40rpx;">
			<view class="flex-SB" style="padding: 5rpx 10rpx;">
				<view style="font-size: 30rpx;font-weight: bold;padding: 15rpx;">今日健康状态</view>
				<view style="font-size: 24rpx;padding: 15rpx;color: #AAAAAA;">{{getDateTime}}</view>
			</view>
			<view class="flex-SB" style="padding: 10px;">
				<view style="width: 185px;height: 185px;"><l-echart style="width: 185px;height: 185px;"
						ref="healthChart"></l-echart></view>
				<view style="width: 134px;">
					<view>
						<view class="" style="display: flex;flex-direction: row;align-items: center;margin-top: 10rpx;">
							<image src="https://baxztech.com/bian_admin_api/public/health/health1.png" class="iconImgh">
							</image>
							<view class="t-title">今日心率</view>
						</view>
						<view style="line-height: 36rpx;margin-top: 10rpx;margin-left: 4rpx;">
							<text
								style="font-size: 48rpx;color: #2E2E2E;font-weight: bold;">{{healthData.heartRate||'-'}}</text>
							<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">次/每分钟</text>
						</view>

						<view class="" style="display: flex;flex-direction: row;align-items: center;margin-top: 10rpx;">
							<image src="https://baxztech.com/bian_admin_api/public/health/health6.png" class="iconImgh">
							</image>
							<view class="t-title">卡路里</view>
						</view>
						<view style="line-height: 36rpx;margin-top: 10rpx;margin-left: 4rpx;">
							<text style="font-size: 48rpx;color: #2E2E2E;font-weight: bold;">{{healthData.kluli}}</text>
							<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">卡路里</text>
<!-- 							<text style="font-size: 48rpx;color: #2E2E2E;font-weight: bold;">{{healthData.sleep.min||'-'}}</text>
							<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">分钟</text> -->
						</view>

						<view class="" style="display: flex;flex-direction: row;align-items: center;margin-top: 10rpx;">
							<image src="https://baxztech.com/bian_admin_api/public/health/health4.png" class="iconImgh">
							</image>
							<view class="t-title">今日步数</view>
						</view>
						<view style="line-height: 36rpx;margin-top: 10rpx;margin-left: 4rpx;">
							<text
								style="font-size: 48rpx;color: #2E2E2E;font-weight: bold;">{{healthData.pedometer||'-'}}</text>
							<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">步</text>
						</view>
					</view>
					<view></view>
					<view></view>
				</view>
			</view>
			<view class="flex-SB" style="padding: 30rpx;">
				<image src="@/static/images/pode.png" class="iconPode"></image>
				<view style="width: 532rpx;">
					<view style="font-size: 28rpx;font-weight: bold;color: #333333;">今日运动目标</view>
					<view class="flex-SB" style="font-size: 18rpx;color: #77777;padding: 12rpx 10rpx;">
						<view>{{healthData.pedometer||'-'}}步</view>
						<view>目标步数10000</view>
					</view>
					<view style="width: 532rpx;height: 10rpx;border-radius: 5rpx;background: #e5e5e5;overflow: hidden;">
						<view style="width: 10rpx;height: 6rpx;border-radius: 5rpx;background: #14b3f8;" :style="{width:(healthData.pedometer/10000*100)+'%'}"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="h-block">
			<view>
				<view class="h-box" @click="$navigateTo('/pagesA/pages/health/heartRate?dateTime='+dateTime)">
					<image src="https://baxztech.com/bian_admin_api/public/health/health1.png" class="iconImgs"></image>
					<view class="h-title">心率</view>
					<view style="line-height: 36rpx;margin-top: 20rpx;">
						<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.heartRate||'-'}}</text>
						<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">次/每分钟</text>
					</view>
					<view class="h-time">{{healthData.heartRateTime}}</view>
				
					<view style="width: 280rpx;height: 160rpx;">
						<l-echart style="width: 280rpx;height: 160rpx;" ref="hrChart"></l-echart>
					</view>
				</view>
				<view class="h30"></view>
				<view v-show="healthData.hasPedemeter" class="h-box" @click="$navigateTo('/pagesA/pages/health/pedometer?dateTime='+dateTime)">
					<image src="https://baxztech.com/bian_admin_api/public/health/health4.png" class="iconImgs"></image>
					<view class="h-title">步数</view>
					<view style="line-height: 36rpx;margin-top: 20rpx;">
						<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.pedometer||'-'}}</text>
						<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">步</text>
					</view>
					<view class="h-time">{{healthData.pedometerTime}}</view>
					<view style="width: 280rpx;height: 160rpx;">
						<l-echart style="width: 280rpx;height: 160rpx;" ref="podeChart"></l-echart>
					</view>
				</view>
				<view class="h30"></view>
				<view  v-show="healthData.hasEcg" class="h-box" @click="$navigateTo('/pagesA/pages/health/heartEcg?dateTime='+dateTime)">
					<image src="https://baxztech.com/bian_admin_api/public/health/health2.png" class="iconImgs"></image>
					<view class="h-title">心电</view>
					<view style="line-height: 36rpx;margin-top: 20rpx;"> 
						<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.avgEcg?'窦性心率':'-'}}</text>
						<!-- <text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">毫秒</text> -->
					</view>
					<view class="h-time">{{healthData.ecgTime}}</view>
					<view style="width: 280rpx;height: 160rpx;">
						<l-echart style="width: 280rpx;height: 160rpx;" ref="ecgChart"></l-echart>
					</view>
				</view>
			</view>
			<view>
				<view class="h-box" @click="$navigateTo('/pagesA/pages/health/oxygen?dateTime='+dateTime)">
					<image src="https://baxztech.com/bian_admin_api/public/health/health3.png" class="iconImgs"></image>
					<view class="h-title">血氧</view>
					<view style="line-height: 36rpx;margin-top: 20rpx;">
						<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.oxygen||'-'}}</text>
						<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">%</text>
					</view>
					<view class="h-time">{{healthData.oxygenTime}}</view>
					<view style="width: 280rpx;height: 160rpx;">
						<l-echart style="width: 280rpx;height: 160rpx;" ref="oxygenChart"></l-echart>
					</view>
				</view>
				<view class="h30"></view>
				<view v-show="healthData.hasBlood" class="h-box" @click="$navigateTo('/pagesA/pages/health/bloodPress?dateTime='+dateTime)">
					<image src="https://baxztech.com/bian_admin_api/public/health/health5.png" class="iconImgs"></image>
					<view class="h-title">血压</view>
					<view style="line-height: 36rpx;margin-top: 20rpx;">
						<text
							style="font-size: 28rpx;color: #2E2E2E;">{{healthData.dbp||'-'}}-{{healthData.sdp||'-'}}</text>
						<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">mmHg</text>
					</view>
					<view class="h-time">{{healthData.bloodTime}}</view>
					<view>
						<view style="width: 242rpx;height: 20rpx;position: relative;margin-top: 30rpx;">
							<view style="border-top-color: #3FE0AC;left: 50%;" class="point-dot"></view>
						</view>
						<view style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;">
							<view class="point-bar" style="background-color: #14b3f8;"></view>
							<view class="point-bar" style="width: 58rpx;background-color: #fdc956;"></view>
							<view class="point-bar" style="width: 54rpx;background-color: #ff4d31;"></view>
						</view>
					</view>
				</view>
				<view class="h30"></view>
				<view v-show="healthData.hasSleep" class="h-box" @click="$navigateTo('/pagesA/pages/health/sleep?dateTime='+dateTime)">
					<image src="https://baxztech.com/bian_admin_api/public/health/health6.png" class="iconImgs"></image>
					<view class="h-title">睡眠</view>
					<view style="line-height: 36rpx;margin-top: 20rpx;">
						<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.sleep.hour}}</text>
						<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">小时</text>
						<text style="font-size: 28rpx;color: #2E2E2E;">{{healthData.sleep.min}}</text>
						<text style="color: #969696;font-size: 24rpx;margin-left: 20rpx;">分钟</text>
					</view>
					<view class="h-time">{{healthData.sleepTime||dateTime}}</view>
					<view>
						<view style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;margin-top: 50rpx;">
							<view class="point-bar" style="width: 224rpx;background-color: #fdc956;"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="h30"></view>
		<u-popup :show="showCal">
			<uni-calendar class="uni-calendar--hook" :endDate="maxDate" :showMonth="false" @change="datechange" />
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date;
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				showCal: false,
				dateTime: `${year}-${month}-${date}`,
				maxDate: `${year}-${month}-${date}`,
				minDate: `${year}-${month}-${date-100}`,
				getDateTime: '',
				nowData: null,
				healthData: {
					upload_time: "",
					heartRate: "-",
					oxygen: "-",
					sdp: "-",
					dbp: "-",
					temperature: "-",
					pedometer: "-",
					heartRateTime: "-",
					oxygenTime: "-",
					bloodD: "-",
					bloodS: "-",
					bloodTime: "-",
					sleep: {
						hour: 0,
						min: 0
					},
					sleepTime: "-",
					temperatureTime: "-",
					pedometerTime: "-",
					ecg: [],
					ecgTime: ''
				},
			};
		},
		onLoad() {
			// this.member.imei = "861389060097206"
			// this.dateTime = "2025-01-11"
			// this.member.imei = "861389060096984"
			// this.dateTime = "2025-06-24"
			this.initPage(this.dateTime);
		},
		onPullDownRefresh() {
			this.initPage(this.dateTime);
		},
		onShow() {
			if(!this.member.imei){
				for (let i in this.$refs) {
					this.$refs[i].dispose();
				}
				this.initEmotionDetail([5, 5, 5]);
				this.healthData = {
					hasBlood:false,
					hasOxygen:true,
					hasHr:true,
					hasSleep:false,
					hasEcg:false,
					hasPedemeter:true,
					upload_time: "",
					heartRate: "-",
					oxygen: "-",
					sdp: "-",
					dbp: "-",
					kluli:"-",
					temperature: "-",
					pedometer: "-",
					heartRateTime: "-",
					oxygenTime: "-",
					bloodD: "-",
					bloodS: "-",
					bloodTime: "-",
					sleep: {
						hour: 0,
						min: 0
					},
					sleepTime: "",
					temperatureTime: "-",
					pedometerTime: "-",
					ecg: [],
					ecgTime: ''
				};
			}
		},
		onHide() {
			this.showCal = false;
		},
		methods: {
			initPage(date) {
				for (let i in this.$refs) {
					this.$refs[i].dispose();
				}
				this.healthData = {
					hasBlood:false,
					hasOxygen:true,
					hasHr:true,
					hasSleep:false,
					hasEcg:false,
					hasPedemeter:true,
					upload_time: "",
					heartRate: "-",
					oxygen: "-",
					sdp: "-",
					dbp: "-",
					kluli:"-",
					temperature: "-",
					pedometer: "-",
					heartRateTime: "-",
					oxygenTime: "-",
					bloodD: "-",
					bloodS: "-",
					bloodTime: "-",
					sleep: {
						hour: 0,
						min: 0
					},
					sleepTime: "",
					temperatureTime: "-",
					pedometerTime: "-",
					ecg: [],
					ecgTime: ''
				};
				this.getDateTime = uni.$u.timeFormat(new Date().getTime(), 'hh:MM');
				let hrval = 0;
				let podeval = 0;
				let sleepval = 0;
				let hrvList = [];
				let oxygenList = [];
				let pedometerList = [];
				let ecgList = [];
				let kluli = 0;
				
				if(!this.member.imei){
					return this.initEmotionDetail([hrval, kluli, podeval]);
				};
				uni.$u.http.post('/client/watch_health_data/home', {
					imei: this.member.imei,
					date
				}).then(res => {
					if(res.status == 500){
						this.$toast(res.msg||'获取数据失败！');
					}
					if (res.status == 200) {
						if (res.data.hr.length) {
							this.healthData.heartRate = res.data.hr[0].value;
							hrvList = res.data.hr;
							hrval = res.data.hr[0].value;
							this.healthData.heartRateTime = uni.$u.timeFormat(new Date(res.data.hr[0].time)
								.getTime(), 'm月d日 hh:MM');
						}
						if (res.data.oxygen.length) {
							this.healthData.oxygen = res.data.oxygen[0].oxygen;
							for (let i in res.data.oxygen) {
								oxygenList.push(res.data.oxygen[i].oxygen)
							}

							this.healthData.oxygenTime = uni.$u.timeFormat(new Date(res.data.oxygen[0].time)
								.getTime(), 'm月d日 hh:MM');
						}
						if (res.data.lk.length) {
							this.healthData.pedometer = res.data.lk[0].pedometer;
							podeval = res.data.lk[0].pedometer;
							kluli = this.toKaluli(podeval)
							for (let i in res.data.lk) {
								pedometerList.push(res.data.lk[i].pedometer)
							}
							this.healthData.kluli = kluli;
							this.healthData.pedometerTime = uni.$u.timeFormat(new Date(res.data.lk[0].time)
								.getTime(), 'm月d日 hh:MM');
						}
						// console.log(res.data.ecg);
						// console.log(typeof res.data.ecg);
						if (res.data.ecg !== undefined) {
							this.healthData.hasEcg  = true;
							if(res.data.ecg){
								this.healthData.avgEcg = parseInt(Math.abs(res.data.ecg.avgEcg) / 1000);
								this.healthData.ecg = res.data.ecg.value;
								for (let i in res.data.ecg.value) {
									let evals = Math.abs(res.data.ecg.value[i]) - Math.abs(res.data.ecg.avgEcg);
									ecgList.push(evals)
								}
								
								this.healthData.ecgTime = uni.$u.timeFormat(new Date(res.data.ecg.data_time).getTime(),
									'm月d日 hh:MM');
							}
						}
						if (res.data.blood !== undefined) {
							if(res.data.blood){
								this.healthData.hasBlood = true;
								this.healthData.dbp = res.data.blood.dbp;
								this.healthData.sdp = res.data.blood.sdp;
								this.healthData.bloodTime = uni.$u.timeFormat(new Date(res.data.blood.time).getTime(),
									'm月d日 hh:MM');
							}

						}

						if (res.data.sleep !== undefined) {
							if(res.data.sleep){
								this.healthData.sleep = this.formatHmObj(res.data.sleep.sumTime);
								this.healthData.sleepTime = uni.$u.timeFormat(new Date(res.data.sleep.time).getTime(),
									'm月d日 hh:MM');
								sleepval = res.data.sleep.sumTime;
							}
							this.healthData.hasSleep  = true;
						}
						if (hrval > 120) {
							hrval = 120
						}
						hrval = parseInt(hrval / 120 * 100);
						podeval = Math.round(podeval / 10000 * 100);
						if(kluli<5) kluli = 5;
						if(podeval<5) podeval = 5;
						if(hrval<5) hrval = 5;
						this.initHrEchart(hrvList);
						this.initOyxgenEchart(oxygenList);
						this.initPodeEchart(pedometerList.reverse());
						if (res.data.ecg) {
							this.initEcgEchart(ecgList);
						}
					}
					this.initEmotionDetail([hrval, kluli, podeval]);


				});
			},
			toKaluli(num){
				// console.log(num);
				if(num == '-'){
					return "-"
				}
				return Math.round(num*0.03)
			},
			formatHmObj(sen) {
				let min = Math.floor(sen / 1000 / 60);
				let hours = '';
				let mins = '';
				if (min) {
					if (min >= 60) {
						let nhour = Math.floor(min / 60)
						mins = min - (nhour * 60);
						return {
							hour: nhour,
							min: mins
						}
					}
					return {
						hour: 0,
						min: min
					}
				}
				return {
					hour: 0,
					min: 0
				}
			},
			datechange(e) {
				this.showCal = false;
				let dstr = e.fulldate;
				if (this.dateTime == dstr) {
					return;
				}
				this.dateTime = dstr;
				this.initPage(this.dateTime);
			},
			initEcgEchart(data) {
				function func(x) {
					x /= 10;
					return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50 - 10;
				}

				function generateData() {
					let data = [];
					for (let i = -50; i <= 20; i += 0.1) {
						data.push([i, func(i)]);
					}
					return data;
				}
				let option = {
					animation: false,
					grid: {
						top: 2,
						left: 0,
						right: 0,
						bottom: 0
					},
					xAxis: {
						show: false,
						type: 'category',
						axisLabel: {
							show: false
						}
					},
					yAxis: {
						show: false,
						type: 'value',
						// min: -5000,
						// max: 5000,
						axisLabel: {
							show: false
						}
					},
					series: [{
						type: 'line',
						showSymbol: false,
						itemStyle: {
							shadowBlur: {
								shadowColor: 'rgba(255, 70, 131, 1)',
								shadowBlur: 1120,
								shadowOffsetY: -2
							},
							color: 'rgb(255, 70, 131)'
						},
						lineStyle: {
							shadowColor: 'rgb(255, 77, 49)',
							shadowBlur: 7.5,
							shadowOffsetX: 0,
							shadowOffsetY: 6
						},
						data: generateData()
						// data
					}]
				};
				this.$nextTick(() => {
					this.$refs.ecgChart.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
			initOyxgenEchart(data) {
				if (data.length < 5) {
					data = [1, 1, 1, 1, 1, 1, 1, 1, ...data];
				}
				let option = {
					xAxis: {
						show: false,
						type: 'category',
					},
					grid: {
						top: 2,
						left: 0,
						right: 0,
						bottom: 0
					},
					yAxis: {
						max:100,
						min:90,
						show: false,
						type: 'value'
					},
					series: [{
						symbol: 'none',
						itemStyle: {
							borderRadius: [20, 20, 20, 20],
							color: '#3FE0AC'
						},
						data,
						type: 'bar'
					}]
				};
				this.$nextTick(() => {
					this.$refs.oxygenChart.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
			initPodeEchart(data) {
				if (data.length && data.length < 3) {
					data = [1, 1, 1, 1, 1, 1, 1, 1, ...data];
				}
				let option = {
					xAxis: {
						show: false,
						type: 'category',
					},
					grid: {
						top: 2,
						left: 0,
						right: 0,
						bottom: 0
					},
					yAxis: {
						show: false,
						type: 'value'
					},
					series: [{
						symbol: 'none',
						itemStyle: {
							borderRadius: [20, 20, 20, 20],
							color: '#14B3F8'
						},
						data,
						type: 'bar'
					}]
				};
				this.$nextTick(() => {
					this.$refs.podeChart.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
			initHrEchart(data) {
				if (data.length < 3) {
					data = [1, 1, 1, 1, 1, 1, 1, 1, ...data];
				}
				let option = {
					grid: {
						top: 2,
						left: 0,
						right: 0,
						bottom: 0
					},
					xAxis: {
						show: false,
						type: 'category',
					},
					yAxis: {
						show: false,
						type: 'value',
						max: 140,
						min: 0
					},
					series: [{
						symbol: 'none',
						itemStyle: {
							color: 'rgb(255, 70, 131)'
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgb(255, 158, 68)'
								},
								{
									offset: 1,
									color: 'rgb(255, 70, 131)'
								}
							])
						},
						data,
						type: 'line'
					}]
				};
				this.$nextTick(() => {
					this.$refs.hrChart.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
			initEmotionDetail(data) {
				const gaugeData = [{
						value: data[0],
						detail: {
							backgroundColor: '#000',
							show: false,
						},
						itemStyle: {
							color: '#FF4D31',
						}
					},
					{
						value: data[1],
						detail: {
							show: false,
						},
						itemStyle: {
							color: '#FDC956',
						}
					},
					{
						value: data[2],
						detail: {
							show: false,
						},
						itemStyle: {
							color: '#14B3F8',
						}
					}
				];
				let option = {
					// title: [
					//   {
					//     text: 'Tangential Polar Bar Label Position (middle)'
					//   }
					// ],
					polar: {
						radius: [30, '95%']
					},
					angleAxis: {
						max: 100,
						startAngle: -90,
						endAngle: 270,
						pointer: {
							show: false
						},
						show: false
					},
					radiusAxis: {
						type: 'category',
						data: ['a', 'b', 'c'],
						show: false
					},
					series: {
						itemStyle: {
							borderRadius: [20, 20, 20, 20],
						},
						showBackground: true,
						backgroundColor: '#ccc',
						type: 'bar',
						data: gaugeData,
						coordinateSystem: 'polar',
					}
				};
				// let option = {
				// 	series: [{
				// 		radius: '95%',
				// 		type: 'gauge',
				// 		startAngle: -90,
				// 		endAngle: 270,
				// 		pointer: {
				// 			show: false
				// 		},
				// 		progress: {
				// 			show: true,
				// 			overlap: false,
				// 			roundCap: true,
				// 			clip: false,
				// 			itemStyle: {
				// 				borderWidth: 0,
				// 			}
				// 		},
				// 		axisLine: {
				// 			lineStyle: {
				// 				width: 40
				// 			}
				// 		},
				// 		splitLine: {
				// 			show: false,
				// 		},
				// 		axisTick: {
				// 			show: false
				// 		},
				// 		axisLabel: {
				// 			show: false,
				// 		},
				// 		data: gaugeData,
				// 	}]
				// };
				this.$nextTick(() => {
					this.$refs.healthChart.init(echarts, chart => {
						chart.setOption(option);
					});
				})

			},
		},
	}
</script>

<style lang="scss" scoped>
	.block {
		width: 684rpx;
		margin: 30rpx auto;
	}

	.iconImg {
		width: 56rpx;
		height: 56rpx;
	}

	.iconImgs {
		position: absolute;
		top: 28rpx;
		right: 28rpx;
		width: 56rpx;
		height: 56rpx;
	}

	.iconPode {
		width: 68rpx;
		height: 68rpx;
	}

	.iconImgh {
		// position: absolute;
		// top: 28rpx;
		// right: 28rpx;
		width: 38rpx;
		height: 38rpx;
	}

	.h-block {
		display: flex;
		width: 684rpx;
		justify-content: space-between;
		margin: 20rpx auto;
		line-height: 36rpx;
	}

	.h-box {
		width: 270rpx;
		border-radius: 40rpx;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		box-shadow: 0px 2rpx #ccc;
	}

	.h-title {
		font-size: 32rpx;
		color: #2E2E2E;
		line-height: 36rpx;
		font-weight: bold;
	}

	.t-title {
		font-size: 32rpx;
		color: #777777;
		line-height: 36rpx;
		margin-left: 10rpx;
		// font-weight: bold;
	}

	.h-time {
		color: #969696;
		font-size: 24rpx;
		line-height: 36rpx;
		margin-top: 20rpx;
	}

	.point-dot {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 15rpx solid #ff4d31;
		position: absolute;
	}

	.point-bar {
		width: 114rpx;
		height: 14rpx;
		border-radius: 7rpx;
		margin: 0 2rpx;
	}
</style>